

<div  id="accordion2" style="background:rgba(255, 255, 255, 0.8);border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;float:right;">
 {% set key = 0 %} 
{% for key,HdvCompteNotification in HdvCompteNotifications %}
	<div id="accordion-group{{key}}" class="accordion-group">
		    <div class="accordion-heading">
		      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse{{ key }}">
			{{ HdvCompteNotification.titre }} 
		      </a>
			<div class="accordion-toggle" id="closecollapse{{key}}"> <button class="btn btn-info" type="button">Lu ?</button></div>
		    </div>
		    <div id="collapse{{ key }}" class="accordion-body collapse in">
		      <div class="accordion-inner" style="color:green;">
			{{ HdvCompteNotification.message }}
		      </div>
		    </div>
	  </div>
<script> 
	$("#closecollapse{{key}}").click(function(e){

			var DATA = 'id=' +{{HdvCompteNotification.id}}
		    $.ajax({
			type: "POST",
			url: "{{ path('D3hdv_hdv_compte_notification_lu')}}",
			data: DATA,
			cache: false,
			success: function(data){
			   $('#accordion2').html(data);
			}
		    });    
		    return false;
	});


</script>

{% endfor %}
</div>

<script>
setTimeout( function() { 

     var DATA = 'id=';
     $.ajax({
			type: "POST",
			url: "{{ path('D3hdv_hdv_compte_notification_non_lu')}}",
			data: DATA,
			cache: false,
			success: function(data){
			   $('#accordion2').html(data);
			}
		    });    
		    //return false;

}, 40000 );

</script>
